<template>
  <el-button plain :size="size" icon="el-icon-download" class="field-format-btn" @click="open">
    选择
    <el-dialog
      title="选择数据格式"
      append-to-body
      width="600px"
      :visible.sync="showDialog"
      class="avue-dialog field-format-dialog"
    >
      <div class="form-wrapper">
        <ValueFormatterEdit ref="form" :formatter-item="formatterItem" />
      </div>
      <div slot="footer" class="avue-dialog__footer avue-dialog__footer--right">
        <el-button size="small" @click="showDialog = false">取消</el-button>
        <el-button size="small" type="primary" :loading="submitting" @click="onSubmitClick">确定</el-button>
      </div>
    </el-dialog>
  </el-button>
</template>
<script>
import ValueFormatterEdit from '@/components/vis/chart/components/value-formatter/value-formatter-edit'

export default {
  components: { ValueFormatterEdit },
  props: {
    size: { type: String, default: '' }, // 大小
  },
  data() {
    return {
      showDialog: false,
      formatterItem: {
        formatterCfg: {
          type: 'auto', // auto,value,percent
          unit: 1, // 换算单位
          suffix: '', // 单位后缀
          decimalCount: 2, // 小数位数
          thousandSeparator: true, // 千分符
        },
      },
    }
  },
  methods: {
    open() {
      this.showDialog = true
    },
    close() {
      this.showDialog = false
    },
    onSubmitClick() {
      const params = this.formatterItem.formatterCfg
      this.$emit('change', params)
      this.showDialog = false
    },
  },
}
</script>
<style lang="scss" scoped>
.field-format-dialog {
  :deep(.el-dialog__body) {
    margin-bottom: 0;
  }

  .form-wrapper {
    .tips {
      margin: 16px 0 24px;
      color: #999;
    }
  }

  :deep(label[for='images']) {
    margin-left: 8px;
  }
}
</style>
